<template>
  <div class="WarZoneDeskEdtail">
    <div class="head">
      <div class="text">
        编号：
        <span>{{pageInfo.graCode}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        名称：
        <span>{{pageInfo.graName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        状态：
        <span>{{pageInfo.deviceState?'正常':'异常'}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        所属门店：
        <span>{{pageInfo.orgName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        关联摄像头：
        <span>{{pageInfo.deviceName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        拍摄区域：
        <span>{{pageInfo.takeArea}}</span>
      </div>
    </div>

    <div class="imgBox">
      <div class="box">
        <p>酒柜定妆照</p>
        <img :src="pageInfo.makeupFileUrl" @error="handleImgUrlError"/>
      </div>
      <div class="box">
        <p>酒柜抓拍照</p>
        <img :src="pageInfo.beforeFileUrl" @error="handleImgUrlError"/>
      </div>
      <div class="box" v-if="finshTag">
        <p>整改后</p>
        <img :src="pageInfo.afterFileUrl" @error="handleImgUrlError" />
      </div>
    </div>

    <div class="suggest">
      <div class="radio_">
        <span>
          属实：
          <el-radio v-model="pageInfo.isTrue" :label="1">是</el-radio>
          <el-radio v-model="pageInfo.isTrue" :label="0">否</el-radio>
        </span>
        <span>
          整改：
          <el-radio v-model="pageInfo.isChange" :label="1">是</el-radio>
          <el-radio v-model="pageInfo.isChange" :label="0">否</el-radio>
        </span>
      </div>
      <div class="downSelect">
        <span>
          整改人：
          <el-select placeholder="请选择" v-model="pageInfo.changerId" size="mini">
            <el-option
              v-for="(item,index) in targetObjectOptions"
              :key="index"
              :label="item.realName+'(店长)'"
              :value="item.userId"
            ></el-option>
          </el-select>
        </span>

        <span>
          抄送人：
          <el-select
            placeholder="请选择"
            v-model="pageInfo.ccUserId"
            size="mini"
            @change="changeccUser"
          >
            <el-option
              v-for="(item,index) in copyToTargetOptions"
              :key="index"
              :label="item.realName+'(店员)'"
              :value="item.userId"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="textArea">
        <div class="textInput">
          处理意见:
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入处理意见"
            resize="none"
            v-model="pageInfo.dealInfo"
          ></el-input>
        </div>
        <div class="textInput" v-if="finshTag">
          整改情况说明:
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="店长处理意见"
            resize="none"
            v-model="pageInfo.decription"
          ></el-input>
        </div>
      </div>

      <div class="btnGroup">
        <el-button size="mini" type="warning" @click="$router.go(-1)">关闭</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="saveData"
          v-if="pageInfo.warnState=='0'"
          v-loading.fullscreen.lock="fullscreenLoading"
        >提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWarningDataDetail,
  getWarningDataDetailOptions,
  postMessageByDeskWarning
} from "@/api/smartShops.js";
import $router from "../../../router";
export default {
  name: "WarZoneDeskEdtail",
  watch: {
    "pageInfo.isTrue": {
      handler(newVal) {
        if (newVal == 0) {
          this.pageInfo.isChange = 0;
        }
      }
    }
  },
  data() {
    return {
      sendObj:{},
      finshTag: false,
      fullscreenLoading: false,
      pageInfo: {
        makeupFileUrl: "",
        beforeFileUrl: "",
        isTrue: 1,
        isChange: 1,
        targetObject: "",
        copyToList: "",
        dealInfo: "",
        changerId: "",
        changerRoleName: "",
        changerName: "",
        ccRoleName: "",
        warnState: ""
      },
      targetObjectOptions: [],
      copyToTargetOptions: []
    };
  },
  methods: {
    async getData(query = {}) {
      let data  = await getWarningDataDetail(query);
      this.pageInfo = { ...this.pageInfo, ...data.result };
      if (this.pageInfo.warnState == "0") {
        this.pageInfo.isChange = 1;
        this.pageInfo.isTrue = 1;
      } else {
        this.pageInfo.isTrue = Number(this.pageInfo.isFact);
        this.pageInfo.isChange = Number(this.pageInfo.isChange);
        if (this.pageInfo.warnState == "2") {
          this.finshTag = true;
        }
      }
      this.getOptions();
    },
    getOptions() {
      /*获取下拉信息*/
      let orgCode = this.pageInfo.orgCode;
      getWarningDataDetailOptions({ userType: "5", orgSeq: orgCode }).then(
        res => {
          this.targetObjectOptions = res.records;
          this.pageInfo.changerId = this.targetObjectOptions[0].userId;
        }
      );
      getWarningDataDetailOptions({ userType: "6", orgSeq: orgCode }).then(
        res => {
          this.copyToTargetOptions = res.records;
        }
      );
    },

    changeccUser(userId) {
      this.pageInfo.ccUserId = userId;
    },
    saveData() {
      this.fullscreenLoading = true;
      this.sendObj = this.pageInfo;
      this.$confirm("是否确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.sendObj = await postMessageByDeskWarning(this.sendObj);
          this.$message({
            type: "success",
            message: "提交成功!",
            duration: 1500,
            onClose: () => {
              $router.go(-1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });

      this.fullscreenLoading = false;
    },
    handleImgUrlError(e) {
      e.target.src = require("@/assets/images/img_icon/head.svg");
    }
  },
  created() {
    let query = this.$route.query;
    this.getData(query);
  }
};
</script>

<style scoped lang="scss">
.WarZoneDeskEdtail {
  width: 100%;
  height: 100%;
  font-size: 13px;

  .head {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;

    .el-divider {
      height: 60%;
    }

    .text {
      font-size: 15px;
      margin: 0 10px;

      span {
        color: red;
        letter-spacing: 1px;
        font-weight: 500;
      }
    }
  }

  .imgBox {
    width: 100%;
    height: 60%;
    margin: 15px 0;
    .box {
      width: 30%;
      height: 100%;
      box-sizing: border-box;
      float: left;
      text-align: center;
      p {
        height: 20px;
        line-height: 20px;
        font-size: 13px;
      }

      img {
        width: 60%;
        height: calc(100% - 20px);
      }
    }
  }

  .suggest {
    width: 60%;
    .radio_ {
      height: 20px;
      width: 100%;
      line-height: 20px;

      span {
        display: block;
        box-sizing: border-box;
        width: 50%;
        float: left;
        text-align: center;
      }
    }

    .downSelect {
      width: 100%;
      height: 50px;
      line-height: 50px;
      span {
        display: block;
        width: 50%;
        box-sizing: border-box;
        float: left;
        text-align: center;

        .el-select {
          width: 130px;
        }
      }
    }
    .textArea {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .textInput {
        width: 80%;
        margin-left: 75px;
      }
    }

    .btnGroup {
      width: 100%;
      height: 30px;
      margin: 10px 0 0 0;
      text-align: center;

      .el-button {
        margin: 0 20px;
      }
    }
  }
}
</style>
